<template>
    <div>
        <el-card>
            <!-- 页面头部导航 -->
             <!-- 二级标题，显示当前页面功能 -->
                <!-- 头部图标（未配置） -->
                 <!-- 主标题，标识模块名称 -->
            <el-page-header
                content="信息列表"           
                icon=""                   
                title="信息管理"             
            />

            <!-- 信息列表表格 -->
              <!-- 绑定表格数据源 -->
               <!-- 表格宽度占满容器 -->
            <el-table
                :data="state.tableData"    
                style="width: 100%"          
            >
                <!-- 标题列 -->
                  <!-- 对应数据字段名 -->
                    <!-- 列标题 -->
                     <!-- 列宽度 -->
                <el-table-column
                    prop="title"             
                    label="标题"             
                    width="180"              
                />

                <!-- 岗位分类列 -->
                <el-table-column label="岗位分类">
                    <template #default="scope">
                        {{ scope.row.job_category }} <!-- 显示岗位分类值（需根据业务需求格式化） -->
                    </template>
                </el-table-column>

                <!-- 专业分类列 -->
                <el-table-column label="专业分类">
                    <template #default="scope">
                        {{ scope.row.major_category }} <!-- 显示专业分类值（需根据业务需求格式化） -->
                    </template>
                </el-table-column>

                <!-- 操作列 -->
                <el-table-column label="操作">
                    <template #default="scope">
                        <!-- 预览按钮 -->
                           <!-- 圆形按钮样式 -->
                              <!-- 图标组件 -->
                               <!-- 按钮类型（成功色） -->
                                <!-- 点击触发预览函数 -->
                        <el-button
                            circle                
                            :icon="Star"          
                            type="success"          
                            @click="handlePreview(scope.row)" 
                        ></el-button>

                        <!-- 编辑按钮 -->
                            <!-- 圆形按钮样式 -->
                              <!-- 图标组件 -->
                               <!-- 点击触发编辑函数 -->
                        <el-button
                            circle               
                            :icon="Edit"           
                            @click="handleEdit(scope.row)"   
                        ></el-button>

                        <!-- 删除确认弹窗 -->
                           <!-- 确认提示文本 -->
                            <!-- 确认按钮文本 -->
                              <!-- 取消按钮文本 -->
                               <!-- 确认删除回调 -->
                        <el-popconfirm
                            title="你确定要删除吗?"  
                            confirmButtonText="确定"  
                            cancelButtonText="取消"   
                            @confirm="handleDelete(scope.row)" 
                        >
                            <template #reference>    <!-- 触发元素模板 -->
                                 <!-- 圆形按钮样式 -->
                                 <!-- 图标组件 -->
                                   <!-- 按钮类型（危险色） -->
                                <el-button
                                    circle                 
                                    :icon="Delete"         
                                    type="danger"          
                                ></el-button>
                            </template>
                        </el-popconfirm>

                        <!-- 查看投递记录按钮 -->
                         <!-- 按钮类型（信息色） -->
                           <!-- 图标组件 -->
                              <!-- 圆形按钮样式 -->
                                <!-- 点击触发查看投递记录函数 -->
                        <el-button 
                            type="info"              
                            :icon="Message"         
                            circle                
                            @click="handlePosts(scope.row)"
                        />
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 信息预览弹窗 -->
          <!-- 控制弹窗显示状态 -->
           <!-- 弹窗标题 -->
            <!-- 弹窗宽度 -->
        <el-dialog
            v-model="dialogVisible"     
            title="预览资料"              
            width="50%"                   
        >
            <div>
                <h2>{{ previewData.title }}</h2>             <!-- 显示预览标题 -->
                <el-divider>
               
                </el-divider>
                <!-- 渲染富文本内容 -->
                <div
                    v-html="previewData.content"             
                    class="htmlcontent"
                ></div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
// 引入Vue组合式API
import { ref, onMounted, reactive } from "vue";
// 引入HTTP请求库
import axios from "axios";
// 引入Element Plus图标组件
import { Star, Edit, Delete, StarFilled, Message } from "@element-plus/icons-vue";
// 引入路由和状态管理
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

// 获取Vuex存储实例和路由实例
const store = useStore();
const router = useRouter();

// 组件状态管理
let state = reactive({
    tableData: [] // 信息列表数据
});

// 预览数据和弹窗状态
const previewData = ref({});       // 预览的信息数据
const dialogVisible = ref(false); // 弹窗显示状态

// 生命周期钩子：组件挂载后加载数据
onMounted(() => {
  getTableData(); // 调用数据获取函数
});

// 获取信息列表数据函数
const getTableData = async () => {
    // 模拟初始数据（实际开发中需移除）
    state.tableData = [/* 模拟数据 */];
    
    // 通过当前用户ID获取其发布的信息列表（从Vuex获取用户ID）
    const table = await axios.get(`/article/findByAuthor?author=${store.state.userInfo.id}`);
    state.tableData = table.data.data; // 更新为真实数据
};

// 预览信息处理函数
const handlePreview = (data) => {
  previewData.value = data; // 设置预览数据
  dialogVisible.value = true; // 显示弹窗
};

// 删除信息处理函数
const handleDelete = async (item) => {
    const itemId = item.id; // 获取要删除的信息ID
    await axios.delete(`/article/deleteById?id=${itemId}`); // 发送删除请求
    await getTableData(); // 重新加载数据以更新列表
};

// 编辑信息处理函数
const handleEdit = (item) => {
    // 跳转到编辑页面，携带信息ID作为路由参数
    router.push(`/information-manage/edit/${item.id}`);
};

// 查看投递记录处理函数
const handlePosts = (item) => {
    // 跳转到投递记录页面，携带信息ID作为路由参数
    router.push(`/information-manage/checkCvs/${item.id}`);
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 50px; // 表格顶部间距，调整页面布局
}

::v-deep .htmlcontent {
  img {
    max-width: 100%; // 确保预览内容中的图片自适应容器宽度
  }
}
</style>